<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">
{% load i18n %}    
<head>
    <title>{% trans "Simple project Demo" %}</title>
    {% block js_libs %}
    <script type="text/javascript" src="/media/js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="/media/js/jquery.timers-1.1.2.js"></script>
    {% endblock js_libs %}
</head>
<body>
    <h1>{% trans "Hello Logger!" %}</h1>
    <p>This demo show how can you emulate a tail -f linux command to
    display a log file</p>
    <p>Use the generate_log.py file to create the test data</p>
    <div class="wrapper">
        <h3>Controlled everyTime</h3>
        <div class="demos">
            <div class="controlled-interval">
                <div id="log" style="max-height:422px; min-height:422px; overflow:auto; background-color:blue;"></div>
                <p><span class="start">Start</span> | <span class="stop">Stop</span>|
                    <span id="loading" style="display:none;"><img src="/media/img/ajax-loader.gif"></span></p>
            </div>
        </div>

    </div>
    <script type="text/javascript">
			$(function() {
                var pos = 0;
				var demos = $("div.wrapper div.demos");
				var active = false;
                $('#log').ajaxStart(function(){$('#loading').show()});
                $('#log').ajaxStop(function(){$('#loading').hide()});
				$('.controlled-interval', demos).find('.start').css("cursor", "pointer").click(function() {
					if (!active) {
						active = !active;
						$('#log').everyTime(1000, 'controlled', function() {
                            $.getJSON(
                                "/log/tail/?pos="+pos,
                                function(data) {
                                    if (data.msg !=''){
                                        $("#log").prepend(data.msg+'<br/>');
                                    }
                                    pos = data.pos;
                                }
                            )
						});
					}
				}).end().find('.stop').css("cursor", "pointer").click(function() {
					if (active) {
						active = !active;
						$('#log').stopTime('controlled');
					}
				});
            });
    </script>
  </body>
</html>
